<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.MainCompleted"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <el-table
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
        height="110px"
      >
        >
        <el-table-column :label="dataList.DeviceNumber">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
          "
        >
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceSpecifications">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceSupplierName">
          <template slot-scope="scope">
            {{ scope.row.supplierName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceStatus">
          <template slot-scope="scope">
            {{ scope.row.statusName }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en'
              ? dataList.eDeviceStorageAddress
              : dataList.DeviceStorageAddress
          "
        >
          <template slot-scope="scope">
            {{ scope.row.storageAddress }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DevicePersonResponsibleId">
          <template slot-scope="scope">
            {{ scope.row.personResponsibleName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.Devicedepart">
          <template slot-scope="scope">
            {{ scope.row.departName }}
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item
          :label="dataList.MainReason"
          :label-style="{ width: '150px' }"
        >
          <span>{{ formData.reason }}</span>
        </el-descriptions-item>
        <el-descriptions-item
          :label="dataList.LastCalibDate"
          :label-style="{ width: '150px' }"
        >
          <span>{{ formatTime(formData.calibrationDate) }}</span>
        </el-descriptions-item>
        <el-descriptions-item
          :label="dataList.Deviceremark"
          :label-style="{ width: '150px' }"
        >
          <span>{{ formData.remark }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <br />
      <el-divider class="el-divider-specail" content-position="left"
        ><span>{{ dataList.MainRecordForm }}</span>
      </el-divider>
      <el-form
        ref="formData"
        class="base-pipeline-layout system-user-form"
        label-width="100px"
        :model="formData"
        :rules="formDataRules"
        status-icon
      >
        <el-form-item
          :label="dataList.RepairVendor"
          :label-width="formLabelWidth"
          prop="repairFactory"
        >
          <el-input
            v-model="formData.repairFactory"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          :label="dataList.EquipStatusAfterRepair"
          :label-width="formLabelWidth"
          prop="repairStatus"
        >
          <DicDropDownList
            v-model="formData.repairStatus"
            :dict-code="'deviceStatusList'"
            :format-time="formatTime"
            :display-text="displayText"
            @input="downclick"
          />
        </el-form-item>

        <el-form-item
          :label="dataList.Resolution"
          :label-width="formLabelWidth"
          prop="repairMethid"
        >
          <el-input v-model="formData.repairMethid" type="textarea"></el-input>
        </el-form-item>

        <el-form-item
          :label="dataList.AccepResult"
          :label-width="formLabelWidth"
          prop="repairResult"
        >
          <el-input v-model="formData.repairResult" type="textarea"></el-input>
        </el-form-item>

        <el-form-item
          :label="dataList.VendorRecom"
          :label-width="formLabelWidth"
          prop="repairFactoryView"
        >
          <el-input
            v-model="formData.repairFactoryView"
            type="textarea"
          ></el-input>
        </el-form-item>

        <el-form-item
          :label="dataList.PersonInvolved"
          :label-width="formLabelWidth"
          prop="repairPerson"
        >
          <el-input v-model="formData.repairPerson" type="textarea"></el-input>
        </el-form-item>

        <el-form-item
          :label="dataList.Deviceremark"
          :label-width="formLabelWidth"
          prop="repairRemark"
        >
          <el-input v-model="formData.repairRemark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" style="width: 100px" @click="onSubmit(30)">{{
          btn.Completed
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get, update } from "../../api/DeviceRepair.js";
import DicDropDownList from "../../components/DicDropDownList.vue";
import { normal, normalName } from "../../utils/const";
import { formatTime } from "../../utils/time";
export default {
  name: "DeviceRepairFinishDialog",
  components: { DicDropDownList },

  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      displayText: [
        this.$t("ModuleDevice.Device.Normal"),
        this.$t("ModuleDevice.Device.Fault"),
        this.$t("ModuleDevice.Device.Downgrading"),
      ],
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "120px",
      list: [],
      initData: {
        id: 0,
        reason: "",
        calibrationDate: null,
        remark: "",
      },
      formData: {
        id: 0,
        num: "",
        deviceNum: "",
        statusId: 0,
        statusName: "",
        creatorId: 0,
        creatorName: "",
        reason: "",
        calibrationDate: 0,
        repairFactory: "",
        repairStatus: normal,
        repairStatusName: normalName(),
        repairMethid: "",
        repairResult: "",
        repairFactoryView: "",
        repairPerson: "",
        repairRemark: "",
        remark: "",
        deviceId: 0,
      },
      formDataRules: {
        reason: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        repairFactory: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        repairStatus: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      initErrorMsg: {
        reason: "",
        calibrationDate: "",
        remark: "",
      },
      errorMsg: {
        reason: "",
        calibrationDate: "",
        remark: "",
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    get({ id: this.editId }).then((res) => {
      this.formData = res.data;
      this.formData.repairStatus = normal;
      this.list = res.data.deviceDtos;
    });
  },
  methods: {
    formatTime,
    downclick(val, label) {
      this.formData.repairStatusName = label;
    },
    cancel() {
      this.$emit("close");
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.cancel();
    },
    onSubmit(statusId) {
      this.formData.statusId = statusId;
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.errorMsg = this.Helper.deepCopy(this.initErrorMsg);
          update(this.formData)
            .then((res) => {
              if (res.code === 200) {
                this.closeDialog();
              } else {
                this.showValidateMsgCheck(res);
              }
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg("reason", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("calibrationDate", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("remark", this.errorMsg, res.msg);
      }
    },
  },
};
</script>
